<template>
	<el-row class="container">
		<el-col :span="24" class="header">
			<el-col :span="10" class="logo" :class="collapsed?'logo-collapse-width':'logo-width'">
				<router-link to="/LyHome" style='text-decoration: none;color: #FFFFFF;'>{{collapsed?'':sysName}}</router-link>
			</el-col>
			<el-col :span="10">
				<div class="tools" @click.prevent="collapse">
					<i class="fa fa-align-justify"></i>
				</div>
			</el-col>
			<el-col :span="4" class="userinfo">
				<el-dropdown trigger="hover">
					<span class="el-dropdown-link userinfo-inner">
						{{sysUserName}}
						<img src="../assets/userphoto.jpg"/>
					</span>
					<el-dropdown-menu slot="dropdown">
						<!--<el-dropdown-item>我的消息</el-dropdown-item>

						<el-dropdown-item divided>设置</el-dropdown-item>-->
						<el-dropdown-item  @click.native="logout">退出登录</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</el-col>
		</el-col>
		<el-col :span="24" class="main">
			<aside :class="collapsed?'menu-collapsed':'menu-expanded'">
				<!--导航菜单-->

    <el-scrollbar class="scrollbar-wrapper">
				<el-menu :default-active="$route.path" class="el-menu-vertical-demo" @select="handleselect"
						 :unique-opened="true" router v-if="!collapsed"  id="elmenu"    >
                 <template v-for="item in $router.options.routes[2].children" v-if="!item.hidden" >


                    <template v-if="item.children">
                        <el-submenu :index="item.path" >
                            <template slot="title"><i :class="item.iconCls"></i>{{ item.name }}</template>


                            <el-menu-item v-for="(subItem,i) in item.children" :key="i" :index="subItem.path"><i :class="subItem.iconCls"></i>{{subItem.name}}</el-menu-item>
                        </el-submenu>
                     </template>




                 <template v-else>




                    <el-menu-item :index="item.path">
                        <i :class="item.iconCls"></i>{{item.name}}
                    </el-menu-item>
                </template>
            </template>
        </el-menu>
        </el-scrollbar>
				<!--<el-menu :default-active="$route.path" class="el-menu-vertical-demo" @select="handleselect"
						 unique-opened router v-if="!collapsed">
					<template v-for="(item,index) in $router.options.routes " >
						<el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" ><i :class="child.iconCls"></i>{{child.name}}</el-menu-item>
					</template>



				</el-menu>


					<el-menu :default-active="$route.path" class="el-menu-vertical-demo" @select="handleselect"
						 unique-opened router v-if="!collapsed">
					<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
						<el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="!child.hidden"><i :class="child.iconCls"></i>{{child.name}}</el-menu-item>
					</template>
				</el-menu>

				-->




			</aside>
			<section class="content-container">
				<div class="grid-content bg-purple-light">
					<el-col :span="24" class="breadcrumb-container">
						<strong class="title">{{$route.name}}</strong>
						<el-breadcrumb separator="/" class="breadcrumb-inner">
							<el-breadcrumb-item v-for="item in $route.matched" :key="item.path">
								{{ item.name }}
							</el-breadcrumb-item>
						</el-breadcrumb>
					</el-col>
					<el-col :span="24" class="content-wrapper">
						<transition name="fade" mode="out-in">
							<router-view></router-view>
						</transition>
					</el-col>
				</div>
			</section>
		</el-col>
	</el-row>
</template>

<script>
//import LeftMenu from '../LeftMenu'
//import Header from '@/components/layout/Header'
    export default {
        data() {
            return {
                sysName:'自动化测试平台',
                collapsed:false,
                sysUserName: 'user',
                // sysUserAvatar: '',
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },

            }
        },
        // components:{
       //LeftMenu,
       // Header
    //},



        methods: {
            onSubmit() {

            },
            handleselect: function (a, b) {
            },
            //退出登录
            logout: function () {
                var _this = this;
                this.$confirm('确认退出吗?', '提示', {
                    //type: 'warning'
                }).then(() => {
                    sessionStorage.removeItem('token');
                    _this.$router.push('/login');
                }).catch(() => {

                });
            },
            //折叠导航栏(左右折叠)
            collapse:function(){
                this.collapsed=!this.collapsed;


            },


            showMenu(i,status){
                this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-'+i)[0].style.display=status?'block':'none';
            }
        },
        mounted() {
            var user = sessionStorage.getItem('username');
            if (user) {
                name = JSON.parse(user);
                this.sysUserName = name || '';
//				this.sysUserAvatar = '../assets/user.png';
            }

        }
    }

</script>

<style scoped lang="scss">
	@import '~scss_vars';

	.container {
		position: absolute;
		top: 0px;
		bottom: 0px;
		width: 100%;
		.header {
			height: 60px;
			line-height: 60px;
			background: $color-primary;
			color:#fff;
			.userinfo {
				text-align: right;
				padding-right: 35px;
				float: right;
				.userinfo-inner {
					cursor: pointer;
					color:#fff;
					img {
						width: 40px;
						height: 40px;
						border-radius: 20px;
						margin: 10px 0px 10px 10px;
						float: right;
					}
				}
			}
			.logo {
				//width:230px;
				height:60px;
				font-size: 22px;
				padding-left:20px;
				padding-right:20px;
				border-color: rgba(238,241,146,0.3);
				border-right-width: 1px;
				border-right-style: solid;
				img {
					width: 40px;
					float: left;
					margin: 10px 10px 10px 18px;
				}
				.txt {
					color:#fff;
				}
			}
			.logo-width{
				width:230px;
			}
			.logo-collapse-width{
				width:60px
			}
			.tools{
				padding: 0px 23px;
				width:14px;
				height: 60px;
				line-height: 60px;
				cursor: pointer;
			}
		}
		.main {
			display: flex;
			// background: #324057;
			position: absolute;
			top: 60px;
			bottom: 0px;
			overflow: hidden;
			margin-left: 0px;
			aside {
				flex:0 0 230px;
				width: 230px;
				// position: absolute;
				// top: 0px;
				// bottom: 0px;
				.el-menu{
					height: 100%;
				}
				.collapsed{
					width:60px;
					.item{
						position: relative;
					}
					.submenu{
						position:absolute;
						top:0px;
						left:60px;
						z-index:99999;
						height:auto;
						display:none;
					}

				}
			}
			.menu-collapsed{
				flex:0 0 60px;
				width: 60px;
			}
			.menu-expanded{
				flex:0 0 230px;
				width: 230px;
			}
			.content-container {
				// background: #f1f2f7;
				flex:1;
				// position: absolute;
				// right: 0px;
				// top: 0px;
				// bottom: 0px;
				// left: 230px;
				overflow-y: scroll;
				padding: 20px;
				.breadcrumb-container {
					//margin-bottom: 15px;
					.title {
						width: 200px;
						float: left;
						color: #475669;
					}
					.breadcrumb-inner {
						float: right;
					}
				}
				.content-wrapper {
					background-color: #fff;
					box-sizing: border-box;
				}
			}
		}
	}
	.sidebar-container{
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      width: 220px;     // transition: width 10s;
      overflow-y: auto;
      &::-webkit-scrollbar {
        display: none;
      }
    }
        .scrollbar-wrapper {
      height: 100%;
      overflow-x: hidden !important;
    }


</style>